<template>
    <div style=" position: relative;"><el-card>
            <template #header>
                <!-- 搜索 -->
                <div>
                    <el-input style="width: 200px;" v-model="find_data.find" placeholder="员工姓名/电话" clearable
                        prefix-icon="Search" />


                    <el-cascader style="width: 200px;margin-left: 20px;" v-model="curval2"
                        :options="findAllDeptList_list" :collapse-tags="true" :clearable="true"
                        :props="{ multiple: true, checkStrictly: true, emitPath: true, value: 'id', label: 'deptName' }"
                        placeholder="请选择部门" :show-all-levels="false" @change="handleChange_find">
                        <template #="{ node, data }">
                            <span>{{ data.deptName }}</span>
                            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                        </template>
                    </el-cascader>
                    <el-select clearable style="width: 200px;margin-left: 20px;" @click="handleSelect3"
                        @change="handleSelect4" v-model="find_data.roleIds" filterable placeholder="请选择岗位角色">
                        <el-option v-for="item in getRoleList_list2" :key="item.id" :label="item.roleName"
                            :value="item.id" />
                    </el-select>
                    <el-select clearable style="width: 200px;margin-left: 20px;" v-model="find_data.staffState"
                        placeholder="入职状态">
                        <el-option label="正式" value="NORMAL"></el-option>
                        <el-option label="试用" value="TRY"></el-option>
                        <el-option label="挂靠" value="DEPEND"></el-option>
                        <el-option label="兼职" value="SOMETIME"></el-option>
                        <el-option label="离职" value="LEAVE"></el-option>
                    </el-select>

                    <el-select multiple collapse-tags clearable v-model="companyNums" :placeholder="'托管单位名称'"
                        style="width: 150px;margin-left:10px;">
                        <template #header>
                            <el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAll">
                                全选
                            </el-checkbox>
                        </template>
                        <el-option v-for="item in findTrusteeshipMeComboList" :key="item.id" :label="item.companyName"
                            :value="item.companyNum">
                        </el-option>
                    </el-select>

                    <el-button style="margin-left: 20px;height:30px" @click="search_btn" type="primary"
                        icon="Search">搜索</el-button>
                </div>
                <!-- 功能按钮 -->
                <div style="margin-top:10px;display: flex;">
                    <el-button @click="add_btn" type="primary" icon="SuccessFilled">添加</el-button>
                    <el-button @click="up_btn" type="warning" icon="WarnTriangleFilled">修改</el-button>
                    <el-button @click="del_btn" type="danger" icon="CircleCloseFilled">删除</el-button>
                    <el-button @click="depart_btn" type="primary" icon="UserFilled">员工离职</el-button>
                    <el-button @click="set_btn" type="primary" icon="Setting">设置金额类型</el-button>
                    <el-button @click="yewuyuan_btn" type="primary" icon="Setting">设置业务员</el-button>
                    <el-button @click="ex_getWalletListForBack_btn" type="warning" icon="Share">导出</el-button>

                </div>
            </template>
            <div>
                <el-table border @header-dragend='headerdragend' @selection-change="selection_change_btn" height="67vh"
                    ref="multipleTableRef" :data="list_data" style="width: 100%">
                    <el-table-column type="selection" width="35" />
                    <el-table-column label="编号" width="55" fixed type="index" />
                    <template v-for="item in table_data_list_new" :key="item.field">
                        <el-table-column v-if="item.off" :width="item.width" :prop="item.field" :label="item.label">
                            <template v-if="item.field == 'isServiceMan'" #="{ row, column, $index }">
                                <span>{{ row.isServiceMan == 1 ? '是' : '否' }}</span>
                            </template>
                            <template v-if="item.field == 'staffState'" #="{ row, column, $index }">
                                <span>{{ row.staffState == 'NORMAL' ? '正式 ' : row.staffState == 'TRY' ? '试用 ' :
                                    row.staffState == 'LEAVE' ? '离职 ' : row.staffState == 'DEPEND' ? '挂靠 ' :
                                        row.staffState == 'SOMETIME' ? '兼职' : '无'
                                }}</span>
                            </template>
                            <template v-if="item.field == 'idCardUrl'" #="{ row, column, $index }">
                                <template v-if="row.idCardUrl">
                                    <template v-if="row.idCardUrl.split(',')">
                                        <template v-if="row.idCardUrl.split(',')[0]">
                                            <el-image style="width: 95px; height: 95px" :preview-teleported="true"
                                                :preview-src-list="[ImageUrl + row.idCardUrl.split(',')[0]]"
                                                :src="row.idCardUrl.split(',')[0] ? ImageUrl + row.idCardUrl.split(',')[0] : ''"
                                                fit="cover">
                                                <template #error>
                                                    <div>
                                                        <el-icon
                                                            style="width: 95px; height: 95px"><icon-picture /></el-icon>
                                                    </div>
                                                </template>
                                            </el-image>
                                        </template>
                                        <template v-if="row.idCardUrl.split(',')[1]">
                                            <el-image style="width: 95px; height: 95px;margin-left:20px"
                                                :preview-teleported="true"
                                                :preview-src-list="[ImageUrl + row.idCardUrl.split(',')[1]]"
                                                :src="row.idCardUrl.split(',')[1] ? ImageUrl + row.idCardUrl.split(',')[1] : ''"
                                                fit="cover">
                                                <template #error>
                                                    <div>
                                                        <el-icon
                                                            style="width: 95px; height: 95px"><icon-picture /></el-icon>
                                                    </div>
                                                </template>
                                            </el-image>
                                        </template>
                                    </template>

                                </template>

                            </template>
                            <template v-if="item.field == 'lookBtlBalance'" #="{ row, column, $index }">
                                {{ row.lookBtlBalance == 0 ? '否' : '是' }}
                            </template>
                            <template v-if="item.field == 'education'" #="{ row, column, $index }">
                                {{ row.education == 'PRIMARYSCHOOL' ? '小学' : row.education == 'JUNIORSCHOOL' ? '初中'
                                    : row.education == 'HIGHSCHOOL'
                                        ? '高中' : row.education == 'COLLEGEDEGREE' ? '专科' : row.education == 'BACHELOR' ? '本科'
                                            : row.education == 'MASTER'
                                                ? '硕士' : row.education == 'DOCTOR' ? '博士' : '无' }}
                            </template>
                        </el-table-column>
                    </template>


                </el-table>
            </div>

            <div style="margin-top:20px">
                <el-pagination @current-change="current_change_btn" @size-change="size_change_btn"
                    v-model:current-page="find_data.page.pageNum" v-model:page-size="find_data.page.pageSize"
                    :page-sizes="[20, 50, 100, 200]" :background="true"
                    layout="prev, pager, next, jumper,->,sizes,total," :total="total" />
            </div>
        </el-card>
    </div>

    <!-- 弹窗 -->
    <div>
        <!-- 表格筛选 -->
        <div style="position: absolute;top:100px;z-index: 9999;" :style="icon_off ? 'right:0px;' : 'right:110px;'">
            <el-icon @click="icon_btn" :size="20">
                <Setting />
            </el-icon>
            <div v-show="icon_off"
                style=" position: relative;top:-100px;right:140px;width: 130px;height:430px;background:#fff;overflow: hidden;">
                <div class="cols-set" style="background:#fff;width:90%;height:97%;margin:auto;margin-top:10px;">
                    <div>
                        <el-button-group style="display: flex; ">
                            <el-tooltip effect="dark" placement="bottom">
                                <template #content>注意：拖动下面的项，可以改变表格列的顺序，<br />记得点击保存才会永久生效哦！ </template>
                                <el-button style="width:10px" type="primary" icon="WarningFilled"></el-button>
                            </el-tooltip>
                            <el-button title="重置" type="primary" icon="Refresh" @click="resetTableSet"></el-button>
                            <el-button title="保存" type="primary" icon="Check" @click="saveTableSet"></el-button>
                        </el-button-group>
                        <div ref="sortableContainer" class="col-items" style="height:400px; overflow-y: auto; ">
                            <el-checkbox class="drag_it" @change="checkbox_btn" v-for="item in sortedItems"
                                :key="item.field" v-model="item.off" :label="item.label" border>
                            </el-checkbox>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- 添加修改 -->
        <el-dialog style="margin-top:5vh" v-model="add_off" :title="title" width="80%" :close-on-click-modal='false'>
            <el-form :model="add_data" label-width="108px" label-suffix="：">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="员工姓名" :rules="[
                            { required: true, message: '请输入员工姓名', trigger: 'change' },
                        ]">
                            <el-input maxlength="10" show-word-limit v-model="add_data.staffName"
                                placeholder="请输入员工姓名" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="联系电话" :rules="[
                            { required: true, message: '请填写联系电话', trigger: 'change' },
                            { min: 1, max: 11, message: '电话长度为11个字符', trigger: 'blur' },
                            { pattern: /^1[3456789]\d{9}$/, message: '手机号码不合法，请重新输入' },
                        ]">
                            <el-input maxlength="11" show-word-limit v-model="add_data.staffPhone"
                                placeholder="请输入联系电话" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="性别" :rules="[
                            { required: false, message: '请选择性别', trigger: 'change' },
                        ]">
                            <el-select style="width: 100%" v-model="add_data.sex" placeholder="性别">
                                <el-option label="男" value="MALE"></el-option>
                                <el-option label="女" value="FEMALE"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="身份证" :rules="[
                            { required: false, message: '请输入身份证号码', trigger: 'change' },
                            { pattern: /^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$/, message: '身份证不合法，请重新输入' },
                        ]">
                            <el-input maxlength="18" @blur="handleBlur" show-word-limit v-model="add_data.idCard"
                                placeholder="请输入身份证号码" />
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="入职状态" :rules="[
                            { required: false, message: '请选择入职公司', trigger: 'change' },
                        ]">
                            <el-select style="width: 100%" v-model="add_data.staffState" placeholder="入职状态">
                                <el-option label="正式" value="NORMAL"></el-option>
                                <el-option label="试用" value="TRY"></el-option>
                                <el-option label="挂靠" value="DEPEND"></el-option>
                                <el-option label="兼职" value="SOMETIME"></el-option>
                                <el-option label="离职" value="LEAVE"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="入职时间" :rules="[
                            { required: true, message: '请选择入职时间', trigger: 'change' },
                        ]">
                            <el-date-picker style="width: 100%" class="date" v-model="add_data.entryTime" type="date"
                                value-format="YYYY-MM-DD" placeholder="选择开始日期" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="合同期限" :rules="[
                            { required: true, message: '请选择合同期限', trigger: 'change' },
                        ]">
                            <el-date-picker style="width: 100%" class="date" v-model="add_data.expireTime" type="date"
                                value-format="YYYY-MM-DD" placeholder="请选择合同期限" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="住宿地址" :rules="[
                            { required: true, message: '请选择住宿地址', trigger: 'change' },
                        ]">
                            <el-input @click="showMap(1)" style="width: 100%" v-model="add_data.stayAddress"
                                placeholder="请选择住宿地址" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="地址简称" :rules="[
                            { required: true, message: '请输入地址简称', trigger: 'change' },
                        ]">
                            <el-input style="width: 100%" v-model="add_data.staySimpleAddress" placeholder="地址简称" />
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="6">
                        <el-form-item label="地址方向" :rules="[
                            { required: true, message: '请选择地址方向', trigger: 'change' },
                        ]">
                            <el-select style="width: 100%" v-model="add_data.stayDirection" placeholder="地址方向">
                                <el-option label="东" value="东"></el-option>
                                <el-option label="南" value="南"></el-option>
                                <el-option label="西" value="西"></el-option>
                                <el-option label="北" value="北"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="6">
                        <el-form-item label="任职部门" :rules="[
                            { required: true, message: '请选择任职部门', trigger: 'change' },
                        ]">
                            <el-cascader v-model="curval" :options="findAllDeptList_list" :collapse-tags="true"
                                :clearable="true"
                                :props="{ multiple: false, checkStrictly: true, emitPath: true, value: 'id', label: 'deptName' }"
                                placeholder="报账角色选择" :show-all-levels="false" @change="handleChange">
                                <template #="{ node, data }">
                                    <span>{{ data.deptName }}</span>
                                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                                </template>
                            </el-cascader>

                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="岗位角色" :rules="[
                            { required: true, message: '请选择岗位角色', trigger: 'change' },
                        ]">
                            <el-select @click="handleSelect" @change="handleSelect2"
                                :disabled="add_data.deptId == '' ? true : false" v-model="add_data.roleId" filterable
                                placeholder="请选择岗位角色" style="width: 100%">
                                <el-option v-for="item in getRoleList_list" :key="item.id" :label="item.roleName"
                                    :value="item.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="身份证(正面)" :rules="[
                            { required: false, message: '请上传身份证(正面)', trigger: 'change' },
                        ]">
                            <el-upload class="avatar-uploader" :action="ImageUrl_upload"
                                :headers="{ token: GET_TOKEN() }"
                                :data="{ ftype: 'IDCARD_FRONT_IMG', files: rawFile_list }"
                                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                                :show-file-list="false">
                                <img v-if="idCardUrl.on" :src="ImageUrl + idCardUrl.on" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="身份证(反面)" :rules="[
                            { required: false, message: '请上传身份证(反面)', trigger: 'change' },
                        ]">
                            <el-upload class="avatar-uploader" :action="ImageUrl_upload"
                                :headers="{ token: GET_TOKEN() }"
                                :data="{ ftype: 'IDCARD_BACK_IMG', files: rawFile_list2 }"
                                :on-success="handleAvatarSuccess2" :before-upload="beforeAvatarUpload2"
                                :show-file-list="false">
                                <img v-if="idCardUrl.two" :src="ImageUrl + idCardUrl.two" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="有效期" :rules="[
                            { required: false, message: '身份证有效期', trigger: 'change' },
                        ]">
                            <el-date-picker style="width: 100%" value-format="YYYY-MM-DD" class="date"
                                v-model="add_data.idCardExpire" type="date" placeholder="选择开始日期" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <template v-if="car_people != '驾驶员'">
                    <div style="margin-top: 10px;">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="最高学历">
                                    <el-select v-model="add_data.education" clearable placeholder="请选择最高学历"
                                        style="width: 100%">
                                        <el-option label="小学" value="PRIMARYSCHOOL"></el-option>
                                        <el-option label="初中" value="JUNIORSCHOOL"></el-option>
                                        <el-option label="高中" value="HIGHSCHOOL"></el-option>
                                        <el-option label="专科" value="COLLEGEDEGREE"></el-option>
                                        <el-option label="本科" value="BACHELOR"></el-option>
                                        <el-option label="硕士" value="MASTER"></el-option>
                                        <el-option label="博士" value="DOCTOR"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="上级主管">
                                    <el-select v-model="add_data.upManageUserId" clearable placeholder="请选择上级主管"
                                        style="width: 100%">
                                        <el-option v-for="item in upManageOptions" :key="item.ftUserId"
                                            :label="item.realName" :value="item.ftUserId"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="买社保日期">
                                    <el-date-picker style="width: 100%" class="date" v-model="add_data.buySocialTime"
                                        type="date" value-format="YYYY-MM-DD" placeholder="选择开始日期" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="账户余额">
                                    <el-radio-group v-model="add_data.lookBtlBalance">
                                        <el-radio :label="1">能查看</el-radio>
                                        <el-radio :label="0">不能查看</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="家庭住址">
                                    <el-input clearable @click="showMap(2)" style="width: 100%"
                                        v-model="add_data.homeAddress" placeholder="请选择家庭住址" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="地址简称">
                                    <el-input style="width: 100%" v-model="add_data.homeSimpleAddress"
                                        placeholder="地址简称" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="其他备注">
                                    <el-input type="textarea" maxlength="200" clearable style="width: 100%"
                                        show-word-limit v-model="add_data.otherNote" placeholder="其他备注" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div style="margin-top: 10px;">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="其他证件">
                                    <div style="display: flex;">
                                        <el-upload class="avatar-uploader" :action="ImageUrl_upload"
                                            :headers="{ token: GET_TOKEN() }"
                                            :data="{ ftype: 'BACK_SET_DATA_IMG', files: rawFile_list3 }"
                                            :on-success="handleAvatarSuccess3" :before-upload="beforeAvatarUpload3"
                                            :show-file-list="false">
                                            <img v-if="otherPaperUrl.on" :src="ImageUrl + otherPaperUrl.on"
                                                class="avatar" />
                                            <el-icon v-else class="avatar-uploader-icon">
                                                <Plus />
                                            </el-icon>
                                        </el-upload>

                                        <el-upload style="margin-left:30px" class="avatar-uploader"
                                            :action="ImageUrl_upload" :headers="{ token: GET_TOKEN() }"
                                            :data="{ ftype: 'BACK_SET_DATA_IMG', files: rawFile_list4 }"
                                            :on-success="handleAvatarSuccess4" :before-upload="beforeAvatarUpload4"
                                            :show-file-list="false">
                                            <img v-if="otherPaperUrl.two" :src="ImageUrl + otherPaperUrl.two"
                                                class="avatar" />
                                            <el-icon v-else class="avatar-uploader-icon">
                                                <Plus />
                                            </el-icon>
                                        </el-upload>
                                    </div>
                                </el-form-item>

                            </el-col>
                        </el-row>
                    </div>
                </template>
                <template v-if="car_people == '驾驶员'">
                    <div style="margin-top: 10px;">
                        <el-row v-if="add_data.staffState == 'DEPEND'">
                            <el-col :span="6">
                                <el-form-item label="站点名称"
                                    :rules="[{ required: false, message: '请选择站点名称', trigger: 'change' }]">
                                    <el-select multiple collapse-tags clearable filterable
                                        v-model="add_data2.stationNames" class="m-2" placeholder="请选择站点名称">
                                        <el-option v-for="item in getStationList_Data" :key="item.stationName"
                                            :label="item.stationName" :value="item.stationName">
                                            <span style="float: left">{{ item.stationName }}</span>

                                        </el-option>

                                    </el-select>
                                </el-form-item>

                            </el-col>
                            <el-col :span="9">
                                <el-form-item label="接人时间"
                                    :rules="[{ required: false, message: '接人时间', trigger: 'change' }]">
                                    <div style="display: flex;">
                                        <el-time-select v-model="add_data2.receiveHour1" style="width: 160px"
                                            start="00:00" step="00:30" end="23:59" placeholder="接人开始时间" />
                                        <div>至</div>
                                        <el-time-select start="00:00" step="00:30" end="23:59"
                                            v-model="add_data2.receiveHour2" style="width: 160px"
                                            placeholder="接人结束时间" />
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="9">
                                <el-form-item label="送人时间"
                                    :rules="[{ required: false, message: '送人时间', trigger: 'change' }]">
                                    <div style="display: flex;">
                                        <el-time-select start="00:00" step="00:30" end="23:59"
                                            v-model="add_data2.sendHour1" style="width: 160px" placeholder="送人开始时间" />
                                        <div>至</div>
                                        <el-time-select start="00:00" step="00:30" end="23:59"
                                            v-model="add_data2.sendHour2" style="width: 160px" placeholder="送人结束时间" />
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="驾照"
                                    :rules="[{ required: false, message: '请选择驾照类型', trigger: 'change' }]">
                                    <el-select v-model="add_data.driverInfo.driveType" placeholder="请选择驾照"
                                        style="width: 100%">
                                        <el-option label="A1" value="A1"></el-option>
                                        <el-option label="A2" value="A2"></el-option>
                                        <el-option label="B1" value="B1"></el-option>
                                        <el-option label="B2" value="B2"></el-option>
                                        <el-option label="C1" value="C1"></el-option>
                                        <el-option label="C2" value="C2"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="领证时间"
                                    :rules="[{ required: false, message: '请选择领证时间', trigger: 'change' }]">
                                    <el-date-picker style="width: 100%" class="date"
                                        v-model="add_data.driverInfo.takeDriveTime" type="date"
                                        value-format="YYYY-MM-DD" placeholder="选择开始日期" :clearable="false" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="增驾时间">
                                    <el-date-picker style="width: 100%" class="date"
                                        v-model="add_data.driverInfo.takeDriveAddTime" type="date"
                                        value-format="YYYY-MM-DD" placeholder="选择开始日期" :clearable="false" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="换证时间">
                                    <el-date-picker style="width: 100%" class="date"
                                        v-model="add_data.driverInfo.takeDriveExpireTime" type="date"
                                        value-format="YYYY-MM-DD" placeholder="选择开始日期" :clearable="false" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="体检时间">
                                    <el-date-picker style="width: 100%" class="date"
                                        v-model="add_data.driverInfo.driverCheckTime" type="date"
                                        value-format="YYYY-MM-DD" placeholder="选择开始日期" :clearable="false" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="资格证类型" label-width="120"
                                    :rules="[{ required: false, message: '请选择资格证类型', trigger: 'change' }]">
                                    <el-select v-model="add_data.driverInfo.certificateType" placeholder="请选择资格证类型"
                                        style="width: 100%">
                                        <el-option label="道路客运" value="道路客运"></el-option>
                                        <el-option label="网约车" value="网约车"></el-option>
                                        <el-option label="出租车" value="出租车"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="准驾车型"
                                    :rules="[{ required: false, message: '请选择准驾车型', trigger: 'change' }]">
                                    <el-select v-model="add_data.driverInfo.certificateDriveType" placeholder="请选择准驾车型"
                                        style="width: 100%">
                                        <el-option label="A1" value="A1"></el-option>
                                        <el-option label="A2" value="A2"></el-option>
                                        <el-option label="B1" value="B1"></el-option>
                                        <el-option label="B2" value="B2"></el-option>
                                        <el-option label="C1" value="C1"></el-option>
                                        <el-option label="C2" value="C2"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="证件号码" prop="serviceType">
                                    <el-input v-model="add_data.driverInfo.certificateNum" placeholder="请输入证件号码" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="领证时间">
                                    <el-date-picker style="width: 100%" class="date"
                                        v-model="add_data.driverInfo.takeCertificateTime" type="date"
                                        value-format="YYYY-MM-DD" placeholder="选择开始日期" :clearable="false" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="换证时间">
                                    <el-date-picker style="width: 100%" class="date"
                                        v-model="add_data.driverInfo.certificateExpireTime" type="date"
                                        value-format="YYYY-MM-DD" placeholder="选择开始日期" :clearable="false" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="买社保日期">
                                    <el-date-picker style="width: 100%" class="date" v-model="add_data.buySocialTime"
                                        type="date" value-format="YYYY-MM-DD" placeholder="选择开始日期" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="家庭住址">
                                    <el-input clearable @click="showMap(2)" style="width: 100%"
                                        v-model="add_data.homeAddress" placeholder="请选择家庭住址" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="地址简称">
                                    <el-input style="width: 100%" v-model="add_data.homeSimpleAddress"
                                        placeholder="地址简称" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="其他备注">
                                    <el-input type="textarea" maxlength="200" clearable style="width: 100%"
                                        show-word-limit v-model="add_data.otherNote" placeholder="其他备注" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="驾驶证(正面)" :rules="[
                                    { required: false, message: '驾驶证', trigger: 'change' },
                                ]">
                                    <el-upload class="avatar-uploader" :action="ImageUrl_upload"
                                        :headers="{ token: GET_TOKEN() }"
                                        :data="{ ftype: 'BACK_SET_DATA_IMG', files: rawFile_list5 }"
                                        :on-success="handleAvatarSuccess5" :before-upload="beforeAvatarUpload5"
                                        :show-file-list="false">
                                        <img v-if="driverCardUrl.on" :src="ImageUrl + driverCardUrl.on"
                                            class="avatar" />
                                        <el-icon v-else class="avatar-uploader-icon">
                                            <Plus />
                                        </el-icon>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="驾驶证(反面)" :rules="[
                                    { required: false, message: '驾驶证', trigger: 'change' },
                                ]">
                                    <el-upload class="avatar-uploader" :action="ImageUrl_upload"
                                        :headers="{ token: GET_TOKEN() }"
                                        :data="{ ftype: 'BACK_SET_DATA_IMG', files: rawFile_list6 }"
                                        :on-success="handleAvatarSuccess6" :before-upload="beforeAvatarUpload6"
                                        :show-file-list="false">
                                        <img v-if="driverCardUrl.two" :src="ImageUrl + driverCardUrl.two"
                                            class="avatar" />
                                        <el-icon v-else class="avatar-uploader-icon">
                                            <Plus />
                                        </el-icon>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="资格证(正面)" :rules="[
                                    { required: false, message: '资格证', trigger: 'change' },
                                ]">
                                    <el-upload class="avatar-uploader" :action="ImageUrl_upload"
                                        :headers="{ token: GET_TOKEN() }"
                                        :data="{ ftype: 'BACK_SET_DATA_IMG', files: rawFile_list7 }"
                                        :on-success="handleAvatarSuccess7" :before-upload="beforeAvatarUpload7"
                                        :show-file-list="false">
                                        <img v-if="certificateUrl.on" :src="ImageUrl + certificateUrl.on"
                                            class="avatar" />
                                        <el-icon v-else class="avatar-uploader-icon">
                                            <Plus />
                                        </el-icon>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="资格证(反面)" :rules="[
                                    { required: false, message: '资格证', trigger: 'change' },
                                ]">
                                    <el-upload class="avatar-uploader" :action="ImageUrl_upload"
                                        :headers="{ token: GET_TOKEN() }"
                                        :data="{ ftype: 'BACK_SET_DATA_IMG', files: rawFile_list8 }"
                                        :on-success="handleAvatarSuccess8" :before-upload="beforeAvatarUpload8"
                                        :show-file-list="false">
                                        <img v-if="certificateUrl.two" :src="ImageUrl + certificateUrl.two"
                                            class="avatar" />
                                        <el-icon v-else class="avatar-uploader-icon">
                                            <Plus />
                                        </el-icon>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="体检报告" :rules="[
                                    { required: false, message: '体检报告', trigger: 'change' },
                                ]">
                                    <el-upload class="avatar-uploader" :action="ImageUrl_upload"
                                        :headers="{ token: GET_TOKEN() }"
                                        :data="{ ftype: 'BACK_SET_DATA_IMG', files: rawFile_list9 }"
                                        :on-success="handleAvatarSuccess9" :before-upload="beforeAvatarUpload9"
                                        :show-file-list="false">
                                        <img v-if="add_data.driverInfo.driverCheckUrl"
                                            :src="ImageUrl + add_data.driverInfo.driverCheckUrl" class="avatar" />
                                        <el-icon v-else class="avatar-uploader-icon">
                                            <Plus />
                                        </el-icon>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="无重大事故" :rules="[
                                    { required: false, message: '无重大事故', trigger: 'change' },
                                ]">
                                    <el-upload class="avatar-uploader" :action="ImageUrl_upload"
                                        :headers="{ token: GET_TOKEN() }"
                                        :data="{ ftype: 'BACK_SET_DATA_IMG', files: rawFile_list10 }"
                                        :on-success="handleAvatarSuccess10" :before-upload="beforeAvatarUpload10"
                                        :show-file-list="false">
                                        <img v-if="add_data.driverInfo.safeProveUrl"
                                            :src="ImageUrl + add_data.driverInfo.safeProveUrl" class="avatar" />
                                        <el-icon v-else class="avatar-uploader-icon">
                                            <Plus />
                                        </el-icon>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>

                    </div>

                </template>
            </el-form>


            <el-button @click="ok_btn" style="margin-left:30vw" type="primary">确认提交</el-button>
        </el-dialog>
        <!-- 地图弹窗 -->
        <el-dialog style="margin-top:10vh;height:80vh;overflow: hidden;" v-model="map_off" title="住宿地址:" width="80%"
            :close-on-click-modal='false'>
            <div class="div_map">
                <div class="map_input">
                    <el-input @input="map_change" id='tipinput' style="width:40%" v-model="map_address"
                        placeholder="请输入住宿地址">
                        <template #prepend>住宿地址:</template>
                    </el-input>
                    <el-button @click="map_ok_btn" type="primary">确认</el-button>
                </div>
                <div v-if="map_address_list.length > 0" class="map_input2">
                    <div style="width:40%;background:#fff;margin-left:20px;padding: 10px;font-weight: 700;">
                        <div @click="map_list_btn(item)" class="div_bg" v-for="(item, index) in map_address_list"
                            :key="index" style="margin-top: 10px;">
                            {{ item.district }}-{{ item.address }}-{{ item.name }}
                        </div>
                    </div>
                </div>
                <div id="myMap" style="height: 65vh; width: 100%">
                </div>
            </div>
        </el-dialog>
        <!-- 员工离职 -->
        <el-dialog style="margin-top:5vh" v-model="depart_off" title="离职处理:" width="40%" :close-on-click-modal='false'>
            <el-form :model="depart" :label-width="'100px'">
                <el-form-item label="离职信息:" :rules="[{ required: true, message: '请输入员工离职信息', trigger: 'change' }]">
                    <el-input maxlength="200" :autosize="{ minRows: 2, maxRows: 6 }" type="textarea" clearable
                        show-word-limit v-model="depart.leaveInfo" placeholder="请输入员工离职信息" />
                </el-form-item>
            </el-form>
            <el-button @click="depart_ok_btn" style="margin-left:30vw" type="primary">确认提交</el-button>
        </el-dialog>
        <!-- 设置金额类型 -->
        <el-dialog style="margin-top:5vh" v-model="set_off" title="设置金额类型:" width="40%" :close-on-click-modal='false'>
            <el-form :model="set_data" :label-width="'100px'">
                <el-form-item label="金额类型:" :rules="[{ required: true, message: '金额类型', trigger: 'change' }]">
                    <el-select clearable @change="findMtypeCombo_change" v-model="findMtypeCombo_value" multiple
                        collapse-tags placeholder="请选择金额类型" style="width: 240px">
                        <el-option v-for="item in findMtypeCombo_list" :key="item.id" :label="item.typeName"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-form>
            <el-button @click="set_ok_btn" style="margin-left:30vw" type="primary">确认提交</el-button>
        </el-dialog>
    </div>
</template>

<script setup>

import Sortable from 'sortablejs'
import AMapLoader from "@amap/amap-jsapi-loader"
import { GET_TOKEN } from '@/utils/token.js'
import { watch, ref, reactive, onMounted, computed } from 'vue'
import {
    adupPrivateSet, getPrivateSetList, findStaffList, findAllDeptList, getRoleList, findStaffCombo,
    addStaff, delStaff, staffLeave, staffExport, findStaffById, modifyStaff, seeMoneyType, findMtypeCombo,
    serviceManSet, findTrusteeshipMeCombo

} from '@/api/human_resources_center.js'
import {
    getStationListPages

} from '@/api/system_management.js'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import { importCusCheckInData } from '@/utils/common.js'
import CircularJSON from 'circular-json'
import { securityJsCode, key, } from '@/utils/common.js'
import {
    line2treeData, findP2CArr, setFmArr

} from '@/utils/common.js'
import * as XLSX from 'xlsx';
import { companyRole_data, ImageUrl, FileType, ImageUrl_upload, getIdCardInfo } from '@/utils/common.js'
onMounted(async () => {


    getPrivateSetList({
        find: '员工列表',
        page: {
            pageNum: 1,
            pageSize: 20,
        },
    }).then(res => {
        if (res.data.list[0]) {
            table_data_list_new.value = JSON.parse(res.data.list[res.data.list.length - 1].dat)
        } else {
            table_data_list_new.value = table_data_list
        }
    })


    Sortable.create(sortableContainer.value, {
        draggable: '.drag_it',
        ghostClass: 'sortable-ghost',
        onEnd: evt => {
            const targetRow = table_data_list_new.value.splice(evt.oldIndex, 1)[0];
            table_data_list_new.value.splice(evt.newIndex, 0, targetRow);
        }
    })
    getStationListPages({
        page: {
            pageNum: 1,
            pageSize: 999,
        },
        stationTypes: ['TRAIN', 'AIRPORT', 'BUS'],
    }).then(res => {
        if (res.code == 1) {
            getStationList_Data.value = res.data.list
        }
    })
    findTrusteeshipMeCombo({
        page: {
            pageNum: 1,
            pageSize: 999,
        },
        companyName: '',
    }).then(res => {
        findTrusteeshipMeComboList.value = res.data || [];
    })

    findAllDeptList({}).then(res => {
        findAllDeptList_list.value = res.data
        findAllDeptList_list.value = line2treeData(findAllDeptList_list.value, 'pid')
        findAllDeptList_list.value = findAllDeptList_list.value[0].children
    })

    findStaffCombo({}).then(res => {
        upManageOptions.value = res.data
    })
    findMtypeCombo({}).then(res => {
        findMtypeCombo_list.value = res.data
    })
    let luser = JSON.parse(localStorage.getItem("luser"))
    let luser_companyNum = luser.companyNum
    companyNums.value = [luser_companyNum]

    await list_api()

})
const getStationList_Data = ref([])
//#region 交易记录列表导出
const ex_getWalletListForBack_btn = () => {
    let ps = {
        page: {
            pageNum: 1,
            pageSize: 20,
        },
        find: find_data.find,
        staffState: find_data.staffState,
        deptIds: find_data.deptIds,
        roleIds: find_data.roleIds.length > 0 ? [find_data.roleIds] : [],

    }
    staffExport(ps).then(res => {
        if (res.code == 1) {
            const data = [
                ['单位编号', '姓名', '电话', '驾驶员', '入职状态', '入职时间', '合同到期时间', '所属部门', '角色/职务', '添加时间', '住宿地址', '学历', '是否查看银行余额'],
            ];
            for (let i = 0; i < res.data.length; i++) {
                let ps = {
                    companyNum: res.data[i].companyNum,
                    realName: res.data[i].realName,
                    phone: res.data[i].phone,
                    driverInfo: res.data[i].driverInfo,
                    staffState: res.data[i].staffState,
                    entryTime: res.data[i].entryTime,
                    expireTime: res.data[i].expireTime,
                    deptId: res.data[i].deptId,
                    roleId: res.data[i].roleId,
                    addTime: res.data[i].addTime,
                    stayAddress: res.data[i].stayAddress,
                    education: res.data[i].education,

                    lookBtlBalance: res.data[i].lookBtlBalance,

                }
                data.push(Object.values(ps))
            }
            const ws = XLSX.utils.aoa_to_sheet(data);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
            XLSX.writeFile(wb, '单位管理后台系统-员工列表.xlsx');
            list_api()
            return ElMessage({
                message: res.msg,
                type: 'success',
            })
        } else {
            return ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }

    })
}
//#endregion
//#region 表格数据处理
const table_data_list = reactive([
    { label: '单位编号', field: 'companyNum', width: 110, off: true },
    { label: '姓名', field: 'staffName', width: 80, off: true },
    { label: '电话', field: 'staffPhone', width: 120, off: true },
    { label: '业务员', field: 'isServiceMan', width: 80, off: true },
    { label: '入职状态', field: 'staffState', width: 100, off: true },
    { label: '站点', field: 'stationNames', width: 200, off: true },
    { label: '接人时间', field: 'receiveHour', width: 140, off: true },
    { label: '送人时间', field: 'sendHour', width: 140, off: true },
    { label: '身份证(正反)', field: 'idCardUrl', width: 240, off: true },
    { label: '入职时间', field: 'entryTime', width: 105, off: true },
    { label: '合同到期时间', field: 'expireTime', width: 110, off: true },
    { label: '所属部门', field: 'deptName', width: 100, off: true },
    { label: '角色/职务', field: 'roleName', width: 110, off: true },
    { label: '添加时间', field: 'addTime', width: 165, off: true },
    { label: '住宿地址', field: 'stayAddress', width: 220, off: true },
    { label: '学历', field: 'education', width: 100, off: true },
    { label: '是否查看银行账余额', field: 'lookBtlBalance', width: 160, off: true },
])

const table_data_list_new = ref([])
const icon_off = ref(false)
// 创建排序容器的引用
const sortableContainer = ref('')

const icon_btn = () => {
    icon_off.value = !icon_off.value
    console.log(sortableContainer.value)

}
const resetTableSet = () => {
    console.log(table_data_list)
    table_data_list_new.value = JSON.parse(JSON.stringify(table_data_list))
}
const saveTableSet = () => {
    adupPrivateSet({
        dat: JSON.stringify(table_data_list_new.value),
        tbName: '员工列表',
        tbNum: "employee_list",
    }).then(res => {
        if (res.code == 1) {
            return ElMessage({
                message: res.msg,
                type: 'success',
            })
        } else {
            return ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }
    })
    icon_off.value = false
}

const checkbox_btn = (e, c) => {
    for (let i = 0; i < table_data_list_new.value.length; i++) {
        if (table_data_list_new.value[i].label == c.target._value) {
            table_data_list_new.value[i].off == e

        }

    }

}

const sortedItems = computed(() => {
    return [...table_data_list_new.value].sort((a, b) => a.id - b.id);
})
//#endregion

//#region 设置金额类型 
const findMtypeCombo_list = ref([])
const findMtypeCombo_value = ref('')
const set_off = ref(false)
const set_data = reactive({
    id: '',
    mtIds: "",
})
const set_btn = () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }
    findStaffById({ id: table_list.value[0].id }).then(res => {
        if (res.data.moneyTypeIdName) {
            let list = []
            let data = res.data.moneyTypeIdName.split(",");
            for (let i = 0; i < data.length; i++) {
                list.push(data[i].split("-")[0])
            }

            set_data.mtIds = list.join()
            findMtypeCombo_value.value = list

            findMtypeCombo_value.value = findMtypeCombo_value.value.map(Number);
        } else {
            set_data.mtIds = ''
            findMtypeCombo_value.value = ''
        }

    })

    set_data.id = table_list.value[0].id


    set_off.value = true
}
const findMtypeCombo_change = (e) => {
    set_data.mtIds = e.join()
}
const checkAll = ref(false)
const indeterminate = ref(false)
const findTrusteeshipMeComboList = ref([])
const companyNums = ref([])
watch(companyNums, (val) => {

    if (val.length === 0) {
        checkAll.value = false
        indeterminate.value = false
    } else if (val.length === findTrusteeshipMeComboList.value.length) {
        checkAll.value = true
        indeterminate.value = false
    } else {
        indeterminate.value = true
    }
})
const handleCheckAll = (val) => {
    indeterminate.value = false
    if (val) {
        companyNums.value = findTrusteeshipMeComboList.value.map((_) => _.companyNum)
    } else {
        companyNums.value = []
    }

}
const set_ok_btn = () => {
    seeMoneyType(set_data).then(res => {
        if (res.code == 1) {
            list_api()
            set_off.value = false
            return ElMessage({
                message: res.msg,
                type: 'success',
            })
        } else {
            set_off.value = false
            return ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }
    })
}
//#endregion


//#region 业务员
const yewuyuan_btn = () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }

    ElMessageBox.confirm(
        `是否确认设置【${table_list.value[0].staffName}】业务员工?`,

        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            distinguishCancelAndClose: 'true',
        }
    )
        .then(() => {
            serviceManSet({
                id: table_list.value[0].id,
                setServiceVal: '1'
            }).then(res => {
                if (res.code == 1) {
                    list_api()
                    return ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                } else {
                    return ElMessage({
                        message: res.msg,
                        type: 'warning',
                    })
                }
            })
        })
        .catch((e) => {
            serviceManSet({
                id: table_list.value[0].id,
                setServiceVal: '0'
            }).then(res => {
                if (res.code == 1) {
                    list_api()
                    return ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                } else {
                    return ElMessage({
                        message: res.msg,
                        type: 'warning',
                    })
                }
            })

        })


}
//#endregion


//#region 员工离职
const depart = reactive({
    id: '',
    leaveInfo: "",
})
const depart_off = ref(false)
const depart_btn = () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }
    depart.id = table_list.value[0].id
    depart.leaveInfo = ''
    depart_off.value = true
}
const depart_ok_btn = () => {
    staffLeave({ id: depart.id, leaveInfo: depart.leaveInfo }).then(res => {
        if (res.code == 1) {
            list_api()
            depart_off.value = false
            return ElMessage({
                message: res.msg,
                type: 'success',
            })
        } else {
            depart_off.value = false
            return ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }
    })
}
//#endregion

//#region 分页列表
const list_data = ref([])
const find_data = reactive({
    page: {
        pageNum: 1,
        pageSize: 20,
    },
    find: '',
    staffState: '',
    deptIds: [],
    roleIds: [],
    companyNums: [],
})
const total = ref(0)

// 分页器一夜显示多少数据页面
const size_change_btn = () => {
    find_data.page.pageNum = 1
    list_api()
}

// 分页器跳转页面
const current_change_btn = () => {
    list_api()
}

const list_api = () => {
    let deptIds = find_data.deptIds
    let roleIds = find_data.roleIds
    if (deptIds.length > 0) {
        deptIds = deptIds.flat();
    } else {
        deptIds = []
    }

    if (typeof (roleIds) == 'number') {
        roleIds = [find_data.roleIds]
    } else {
        roleIds = []
    }
    let ps = {
        page: {
            pageNum: find_data.page.pageNum,
            pageSize: find_data.page.pageSize,
        },
        find: find_data.find,
        staffState: find_data.staffState,
        deptIds: [],
        roleIds: [],
        companyNums: [],
        deptIds: deptIds,
        roleIds: roleIds,

    }
    // let luser = JSON.parse(localStorage.getItem("luser"))
    // let luser_companyNum = luser.companyNum
    // ps.companyNums = [luser_companyNum]
    // ps.companyNums = ps.companyNums.concat(companyNums.value)
    ps.companyNums = companyNums.value
    findStaffList(ps).then(res => {
        list_data.value = res.data.list
        total.value = res.data.total
    })
}
//#endregion

//#region 添加
const handleBlur = (e) => {
    let data = e.target.value;

    let { age, gender, birthday } = getIdCardInfo(data, "-");
    add_data.age = age;
    add_data.birthdayTime = birthday;
    add_data.sex = gender ? "MALE" : "FEMALE";
}
// 打开地图
const marker = ref('')
const map_off = ref(false)
const map_address = ref('')
const map_address_list = ref([])
const map_value = ref({})
const map_index = ref('')
const showMap = (e) => {
    map_index.value = e
    marker.value = ''
    map_address.value = ''
    map_address_list.value = []
    map_value.value = ''
    map_off.value = true


    // 地图
    window._AMapSecurityConfig = {
        securityJsCode: securityJsCode,
    }
    // 首次加载
    AMapLoader.load({
        key: key,
        version: '2.0',
        plugins: ['AMap.Driving', 'AMap.Geolocation', 'AMap.Scale', 'AMap.AutoComplete', 'AMap.PlaceSearch'],
    }).then((AMap) => {
        // 初始化-地图对象
        myMap.value = new AMap.Map('myMap', { zoom: 10, center: [104.065861, 30.657401] });
    }).catch(err => { console.log('高德地图加载失败：', err); });
}
const map_change = () => {
    let autoOptions = {
        city: '成都市'
    }
    var autoComplete = new AMap.Autocomplete(autoOptions);
    autoComplete.search(map_address.value, function (status, result) {
        // 搜索成功时，result即是对应的匹配数据
        map_address_list.value = result.tips.slice(0, 5)
    })
}
const map_list_btn = (e) => {
    map_address.value = e.district + '-' + e.address + '-' + e.name
    map_value.value = e

    myMap.value.panTo([e.location.lng, e.location.lat]);
    if (marker.value) {
        myMap.value.remove(marker.value);
    }
    myMap.value.setFitView();
    marker.value = new AMap.Marker({
        map: myMap.value,
        position: [e.location.lng, e.location.lat],
    });
    myMap.value.setFitView();
    myMap.value.add(marker.value);


}
const map_ok_btn = () => {
    if (map_index.value == 1) {
        add_data.stayAddress = map_address.value
        add_data.stayLatLon = map_value.value.location.lng + ',' + map_value.value.location.lat
        map_off.value = false
    } else if (map_index.value == 2) {
        add_data.homeAddress = map_address.value
        add_data.homeLatLon = map_value.value.location.lng + ',' + map_value.value.location.lat
        map_off.value = false
    }



}
const curval = ref([])
const findAllDeptList_list = ref([])
const handleChange = (valarr) => {
    if (valarr) {
        console.log('点击了', valarr);
        let resval = [];
        if (valarr.length > 0) resval = [valarr[valarr.length - 1]];
        add_data.deptId = valarr[valarr.length - 1]
    }
}
const handleChange_find = (valarr) => {

    let arr = []
    if (valarr) {

        for (let i = 0; i < valarr.length; i++) {
            arr.push(valarr[i])
        }

        find_data.deptIds = arr
    }


}
const getRoleList_list = ref([])
const handleSelect = () => {
    getRoleList({ deptIds: add_data.deptId }).then(res => {
        getRoleList_list.value = res.data
    })
}
const car_people = ref('')
const handleSelect2 = (e) => {
    add_data.roleId = e
    for (let i = 0; i < getRoleList_list.value.length; i++) {
        if (getRoleList_list.value[i].id == e)
            car_people.value = getRoleList_list.value[i].roleName
    }
    console.log(add_data.roleId)
}
const getRoleList_list2 = ref([])
const handleSelect3 = () => {
    if (find_data.deptIds.length > 0) {
        getRoleList({ deptIds: find_data.deptIds.join(',') }).then(res => {
            getRoleList_list2.value = res.data
        })
    } else {
        getRoleList_list2.value = []
    }
}
const handleSelect4 = (e) => {
    find_data.roleIds = e
}
const idCardUrl = reactive({
    on: '',
    two: '',
})
const rawFile_list = ref([])
const handleAvatarSuccess = (response, uploadFile) => {
    idCardUrl.on = response.data.file.url
}
const beforeAvatarUpload = (rawFile) => {
    rawFile_list.value = []
    if (rawFile.type == 'image/jpeg' || rawFile.type == 'image/png' || rawFile.type == 'image/gif') {
        if (rawFile.size / 1024 / 1024 > 5) {
            ElMessage.error('图片大小不能大于5M!')
            return false
        }
    } else {
        ElMessage.error('请上传图片!')
        return false
    }

    rawFile_list.value.push(rawFile)
    return true

}
const rawFile_list2 = ref([])
const handleAvatarSuccess2 = (response, uploadFile) => {
    idCardUrl.two = response.data.file.url
}
const beforeAvatarUpload2 = (rawFile) => {
    rawFile_list2.value = []
    if (rawFile.type == 'image/jpeg' || rawFile.type == 'image/png' || rawFile.type == 'image/gif') {
        if (rawFile.size / 1024 / 1024 > 5) {
            ElMessage.error('图片大小不能大于5M!')
            return false
        }
    } else {
        ElMessage.error('请上传图片!')
        return false
    }

    rawFile_list2.value.push(rawFile)
    return true

}

const otherPaperUrl = reactive({
    on: '',
    two: '',
})

const rawFile_list3 = ref([])
const handleAvatarSuccess3 = (response, uploadFile) => {
    otherPaperUrl.on = response.data.file.url
}
const beforeAvatarUpload3 = (rawFile) => {
    rawFile_list3.value = []
    if (rawFile.type == 'image/jpeg' || rawFile.type == 'image/png' || rawFile.type == 'image/gif') {
        if (rawFile.size / 1024 / 1024 > 5) {
            ElMessage.error('图片大小不能大于5M!')
            return false
        }
    } else {
        ElMessage.error('请上传图片!')
        return false
    }

    rawFile_list3.value.push(rawFile)
    return true

}
const rawFile_list4 = ref([])
const handleAvatarSuccess4 = (response, uploadFile) => {
    otherPaperUrl.two = response.data.file.url
}
const beforeAvatarUpload4 = (rawFile) => {
    rawFile_list4.value = []
    if (rawFile.type == 'image/jpeg' || rawFile.type == 'image/png' || rawFile.type == 'image/gif') {
        if (rawFile.size / 1024 / 1024 > 5) {
            ElMessage.error('图片大小不能大于5M!')
            return false
        }
    } else {
        ElMessage.error('请上传图片!')
        return false
    }

    rawFile_list4.value.push(rawFile)
    return true

}
const driverCardUrl = reactive({
    on: '',
    two: '',
})
const rawFile_list5 = ref([])
const handleAvatarSuccess5 = (response, uploadFile) => {
    driverCardUrl.on = response.data.file.url
}
const beforeAvatarUpload5 = (rawFile) => {
    rawFile_list5.value = []
    if (rawFile.type == 'image/jpeg' || rawFile.type == 'image/png' || rawFile.type == 'image/gif') {
        if (rawFile.size / 1024 / 1024 > 5) {
            ElMessage.error('图片大小不能大于5M!')
            return false
        }
    } else {
        ElMessage.error('请上传图片!')
        return false
    }

    rawFile_list5.value.push(rawFile)
    return true

}
const rawFile_list6 = ref([])
const handleAvatarSuccess6 = (response, uploadFile) => {
    driverCardUrl.two = response.data.file.url
}
const beforeAvatarUpload6 = (rawFile) => {
    rawFile_list6.value = []
    if (rawFile.type == 'image/jpeg' || rawFile.type == 'image/png' || rawFile.type == 'image/gif') {
        if (rawFile.size / 1024 / 1024 > 5) {
            ElMessage.error('图片大小不能大于5M!')
            return false
        }
    } else {
        ElMessage.error('请上传图片!')
        return false
    }

    rawFile_list6.value.push(rawFile)
    return true

}

const certificateUrl = reactive({
    on: '',
    two: '',
})
const rawFile_list7 = ref([])
const handleAvatarSuccess7 = (response, uploadFile) => {
    certificateUrl.on = response.data.file.url
}
const beforeAvatarUpload7 = (rawFile) => {
    rawFile_list7.value = []
    if (rawFile.type == 'image/jpeg' || rawFile.type == 'image/png' || rawFile.type == 'image/gif') {
        if (rawFile.size / 1024 / 1024 > 5) {
            ElMessage.error('图片大小不能大于5M!')
            return false
        }
    } else {
        ElMessage.error('请上传图片!')
        return false
    }

    rawFile_list7.value.push(rawFile)
    return true

}
const rawFile_list8 = ref([])
const handleAvatarSuccess8 = (response, uploadFile) => {
    certificateUrl.two = response.data.file.url
}
const beforeAvatarUpload8 = (rawFile) => {
    rawFile_list8.value = []
    if (rawFile.type == 'image/jpeg' || rawFile.type == 'image/png' || rawFile.type == 'image/gif') {
        if (rawFile.size / 1024 / 1024 > 5) {
            ElMessage.error('图片大小不能大于5M!')
            return false
        }
    } else {
        ElMessage.error('请上传图片!')
        return false
    }

    rawFile_list8.value.push(rawFile)
    return true

}

const rawFile_list9 = ref([])
const handleAvatarSuccess9 = (response, uploadFile) => {
    add_data.driverInfo.driverCheckUrl = response.data.file.url
}
const beforeAvatarUpload9 = (rawFile) => {
    rawFile_list9.value = []
    if (rawFile.type == 'image/jpeg' || rawFile.type == 'image/png' || rawFile.type == 'image/gif') {
        if (rawFile.size / 1024 / 1024 > 5) {
            ElMessage.error('图片大小不能大于5M!')
            return false
        }
    } else {
        ElMessage.error('请上传图片!')
        return false
    }

    rawFile_list9.value.push(rawFile)
    return true

}

const rawFile_list10 = ref([])
const handleAvatarSuccess10 = (response, uploadFile) => {
    add_data.driverInfo.safeProveUrl = response.data.file.url
}
const beforeAvatarUpload10 = (rawFile) => {
    rawFile_list10.value = []
    if (rawFile.type == 'image/jpeg' || rawFile.type == 'image/png' || rawFile.type == 'image/gif') {
        if (rawFile.size / 1024 / 1024 > 5) {
            ElMessage.error('图片大小不能大于5M!')
            return false
        }
    } else {
        ElMessage.error('请上传图片!')
        return false
    }

    rawFile_list10.value.push(rawFile)
    return true

}


const upManageOptions = ref([])



const add_off = ref(false)
const title = ref('添加员工')
const add_data2 = reactive({
    stationNames: [],
    receiveHour1: '',
    receiveHour2: '',
    sendHour1: '',
    sendHour2: '',
})
const add_data = reactive({
    id: '',
    age: '',
    birthdayTime: '',
    buySocialTime: '',
    deptId: '',
    driverInfo: {
        certificateDriveType: '',
        certificateExpireTime: '',
        certificateNum: "",
        certificateType: "",
        certificateUrl: "",
        driveType: "",
        driverCardUrl: "",
        driverCheckTime: "",
        driverCheckUrl: "",
        safeProveUrl: "",
        takeCertificateTime: "",
        takeDriveAddTime: "",
        takeDriveExpireTime: "",
        takeDriveTime: "",
    },
    education: '',
    entryTime: '',
    expireTime: '',
    homeAddress: '',
    homeLatLon: '',
    homeSimpleAddress: '',
    idCard: '',
    idCardExpire: '',
    idCardUrl: '',
    lookBtlBalance: 0,
    otherNote: '',
    otherPaperUrl: '',
    roleId: '',
    sex: '',
    staffName: '',
    staffPhone: '',
    staffState: '',
    stayAddress: '',
    stayDirection: '',
    stayLatLon: '',
    staySimpleAddress: '',
    upManageUserId: '',
})
// 默认今天
const today = () => {
    let today = new Date();
    let year = today.getFullYear();
    let month = String(today.getMonth() + 1).padStart(2, '0');
    let day = String(today.getDate()).padStart(2, '0');

    let formattedDate = `${year}-${month}-${day}`;
    return formattedDate
}
// 默认一年后
const toyear = () => {
    let today = new Date();
    let nextYear = new Date(today.getFullYear() + 1, today.getMonth(), today.getDate());

    let year = nextYear.getFullYear();
    let month = String(nextYear.getMonth() + 1).padStart(2, '0');
    let day = String(nextYear.getDate()).padStart(2, '0');

    let formattedDate = `${year}-${month}-${day}`;
    return formattedDate
}
const add_btn = () => {
    title.value = '添加员工'


    add_data.age = ''
    add_data.birthdayTime = ''
    add_data.buySocialTime = ''
    add_data.driverInfo.certificateDriveType = ''
    add_data.driverInfo.certificateExpireTime = ''
    add_data.driverInfo.certificateNum = ''
    add_data.driverInfo.certificateType = ''
    add_data.driverInfo.certificateUrl = ''
    add_data.driverInfo.driveType = ''
    add_data.driverInfo.driverCardUrl = ''
    add_data.driverInfo.driverCheckTime = ''
    add_data.driverInfo.driverCheckUrl = ''
    add_data.driverInfo.safeProveUrl = ''
    add_data.driverInfo.takeCertificateTime = ''
    add_data.driverInfo.takeDriveAddTime = ''
    add_data.driverInfo.takeDriveExpireTime = ''
    add_data.driverInfo.takeDriveTime = ''
    add_data.education = ''
    add_data.entryTime = ''
    add_data.expireTime = ''
    add_data.homeAddress = ''
    add_data.homeLatLon = ''
    add_data.homeSimpleAddress = ''
    add_data.idCard = ''
    add_data.idCardExpire = ''
    add_data.idCardUrl = ''
    add_data.lookBtlBalance = 0
    add_data.otherNote = ''
    add_data.otherPaperUrl = ''
    add_data.roleId = ''
    add_data.sex = ''
    add_data.staffName = ''
    add_data.staffPhone = ''
    add_data.staffState = ''
    add_data.stayAddress = ''
    add_data.stayDirection = ''
    add_data.stayLatLon = ''
    add_data.staySimpleAddress = ''
    add_data.upManageUserId = ''
    add_data.id = ''
    add_data.entryTime = today()
    add_data.expireTime = toyear()
    otherPaperUrl.on = ''
    otherPaperUrl.two = ''
    idCardUrl.on = ''
    idCardUrl.two = ''
    driverCardUrl.on = ''
    driverCardUrl.two = ''
    certificateUrl.on = ''
    certificateUrl.two = ''

    add_data2.stationNames = []
    add_data2.receiveHour1 = ''
    add_data2.receiveHour2 = ''
    add_data2.sendHour1 = ''
    add_data2.sendHour2 = ''

    add_off.value = true

}


//#endregion

//#region 表格选择
const table_list = ref([])
const headerdragend = (newWidth, oldWidth, column) => {
    console.log(newWidth, oldWidth, column)
    for (let i = 0; i < table_data_list_new.value.length; i++) {
        if (column.property == table_data_list_new.value[i].field) {
            table_data_list_new.value[i].width = newWidth
        }
    }
}
const selection_change_btn = (e) => {
    table_list.value = e
    console.log(e)
}
//#endregion
//#region 修改
const up_btn = () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }


    title.value = '修改员工'


    findStaffById({ id: table_list.value[0].id }).then(res => {
        let data = res.data

        add_data.id = table_list.value[0].id
        add_data.age = data.age
        add_data.birthdayTime = data.birthdayTime
        add_data.buySocialTime = data.buySocialTime
        add_data.driverInfo.certificateDriveType = data.driverInfo.certificateDriveType
        add_data.driverInfo.certificateExpireTime = data.driverInfo.certificateExpireTime
        add_data.driverInfo.certificateNum = data.driverInfo.certificateNum
        add_data.driverInfo.certificateType = data.driverInfo.certificateType
        add_data.driverInfo.certificateUrl = ''
        add_data.driverInfo.driveType = data.driverInfo.driveType
        add_data.driverInfo.driverCardUrl = ''
        add_data.driverInfo.driverCheckTime = data.driverInfo.driverCheckTime
        add_data.driverInfo.driverCheckUrl = data.driverInfo.driverCheckUrl
        add_data.driverInfo.safeProveUrl = data.driverInfo.safeProveUrl
        add_data.driverInfo.takeCertificateTime = data.driverInfo.takeCertificateTime
        add_data.driverInfo.takeDriveAddTime = data.driverInfo.takeDriveAddTime
        add_data.driverInfo.takeDriveExpireTime = data.driverInfo.takeDriveExpireTime
        add_data.driverInfo.takeDriveTime = data.driverInfo.takeDriveTime
        add_data.education = data.education
        add_data.entryTime = data.entryTime
        add_data.expireTime = data.expireTime
        add_data.homeAddress = data.homeAddress
        add_data.homeLatLon = data.homeLatLon
        add_data.homeSimpleAddress = data.homeSimpleAddress
        add_data.idCard = data.idCard
        add_data.idCardExpire = data.idCardExpire

        add_data.lookBtlBalance = data.lookBtlBalance
        add_data.otherNote = data.otherNote
        add_data.otherPaperUrl = ''
        add_data.roleId = data.roleId
        add_data.sex = data.sex
        add_data.staffName = data.staffName
        add_data.staffPhone = data.staffPhone
        add_data.staffState = data.staffState
        add_data.stayAddress = data.stayAddress
        add_data.stayDirection = data.stayDirection
        add_data.stayLatLon = data.stayLatLon
        add_data.staySimpleAddress = data.staySimpleAddress
        add_data.upManageUserId = data.upManageUserId
        add_data.deptId = data.deptId
        add_data.idCardUrl = ''
        curval.value = add_data.deptId
        add_data2.stationNames = data.stationNames.includes(",") ? data.stationNames.split(",") : []

        add_data2.receiveHour1 = data.receiveHour ? data.receiveHour.split("-")[0] : ''
        add_data2.receiveHour2 = data.receiveHour ? data.receiveHour.split("-")[1] : ''
        add_data2.sendHour1 = data.sendHour ? data.sendHour.split("-")[0] : ''
        add_data2.sendHour2 = data.sendHour ? data.sendHour.split("-")[1] : ''



        getRoleList({ deptIds: add_data.deptId }).then(res => {
            getRoleList_list.value = res.data
            for (let i = 0; i < getRoleList_list.value.length; i++) {
                if (getRoleList_list.value[i].id == add_data.roleId)
                    car_people.value = getRoleList_list.value[i].roleName
            }
        })
        if (data.idCardUrl) {
            if (data.idCardUrl.split(",")[0]) {
                idCardUrl.on = data.idCardUrl.split(",")[0]
            }
            if (data.idCardUrl.split(",")[1]) {
                idCardUrl.two = data.idCardUrl.split(",")[1]
            }
        } else {
            idCardUrl.on = ''
            idCardUrl.two = ''
        }

        if (data.otherPaperUrl) {
            if (data.otherPaperUrl.split(",")[0]) {
                otherPaperUrl.on = data.otherPaperUrl.split(",")[0]
            }
            if (data.otherPaperUrl.split(",")[1]) {
                otherPaperUrl.two = data.otherPaperUrl.split(",")[1]
            }
        } else {
            otherPaperUrl.on = ''
            otherPaperUrl.two = ''
        }

        if (data.driverInfo.driverCardUrl) {
            if (data.driverInfo.driverCardUrl.split(",")[0]) {
                driverCardUrl.on = data.driverInfo.driverCardUrl.split(",")[0]
            }
            if (data.driverInfo.driverCardUrl.split(",")[1]) {
                driverCardUrl.two = data.driverInfo.driverCardUrl.split(",")[1]
            }
        } else {
            driverCardUrl.on = ''
            driverCardUrl.two = ''
        }

        if (data.driverInfo.certificateUrl) {
            if (data.driverInfo.certificateUrl.split(",")[0]) {
                certificateUrl.on = data.driverInfo.certificateUrl.split(",")[0]
            }
            if (data.certificateUrl.split(",")[1]) {
                certificateUrl.two = data.driverInfo.certificateUrl.split(",")[1]
            }
        } else {
            certificateUrl.on = ''
            certificateUrl.two = ''
        }


    })




    add_off.value = true
}
//#endregion

// 提交
const ok_btn = () => {

    if (otherPaperUrl.two) {
        add_data.otherPaperUrl = otherPaperUrl.on + ',' + otherPaperUrl.two
    } else if (otherPaperUrl.on) {
        add_data.otherPaperUrl = otherPaperUrl.on
    } else {
        add_data.otherPaperUrl = ''
    }

    if (idCardUrl.two) {
        add_data.idCardUrl = idCardUrl.on + ',' + idCardUrl.two
    } else if (idCardUrl.on) {
        add_data.idCardUrl = idCardUrl.on
    } else {
        add_data.idCardUrl = ''
    }
    if (driverCardUrl.two) {
        add_data.driverInfo.driverCardUrl = driverCardUrl.on + ',' + driverCardUrl.two
    } else if (driverCardUrl.on) {
        add_data.driverInfo.driverCardUrl = driverCardUrl.on
    } else {
        add_data.driverInfo.driverCardUrl = ''
    }

    if (certificateUrl.two) {
        add_data.driverInfo.certificateUrl = certificateUrl.on + ',' + certificateUrl.two
    } else if (certificateUrl.on) {
        add_data.driverInfo.certificateUrl = certificateUrl.on
    } else {
        add_data.driverInfo.certificateUrl = ''
    }

    if (add_data.staffState == 'DEPEND') {
        add_data2.stationNames ? add_data.stationNames = add_data2.stationNames.join(', ') : add_data.stationNames = []
        add_data2.receiveHour1 ? add_data.receiveHour = add_data2.receiveHour1 + '-' + add_data2.receiveHour2 : add_data.receiveHour = ''
        add_data2.sendHour1 ? add_data.sendHour = add_data2.sendHour1 + '-' + add_data2.sendHour2 : add_data.receiveHour = ''
    }


    if (!add_data.deptId) {
        return ElMessage({
            message: '请选择部门',
            type: 'warning',
        })
    } else if (!add_data.entryTime) {
        return ElMessage({
            message: '请选择入职时间',
            type: 'warning',
        })
    } else if (!add_data.expireTime) {
        return ElMessage({
            message: '合同有效期 ',
            type: 'warning',
        })
    } else if (!add_data.roleId) {
        return ElMessage({
            message: '请选择角色',
            type: 'warning',
        })
    } else if (!add_data.staffName) {
        return ElMessage({
            message: '请输入姓名',
            type: 'warning',
        })
    } else if (!add_data.staffPhone) {
        return ElMessage({
            message: '请输入电话',
            type: 'warning',
        })
    } else if (!add_data.staffState) {
        return ElMessage({
            message: '请选择入职状态',
            type: 'warning',
        })
    } else if (!add_data.stayAddress) {
        return ElMessage({
            message: '请选择住宿地址全称',
            type: 'warning',
        })
    }
    // else if (!add_data.age) {
    //     return ElMessage({
    //         message: '请输入年龄',
    //         type: 'warning',
    //     })
    // } else if (!add_data.birthdayTime) {
    //     return ElMessage({
    //         message: '请重新输入身份证',
    //         type: 'warning',
    //     })
    // }
    // else if (!add_data.idCard) {
    //     return ElMessage({
    //         message: '请输入身份证 ',
    //         type: 'warning',
    //     })
    // } else if (!add_data.idCardUrl) {
    //     return ElMessage({
    //         message: '请上传身份证照片',
    //         type: 'warning',
    //     })
    // }  else if (!add_data.sex) {
    //     return ElMessage({
    //         message: '请选择姓别',
    //         type: 'warning',
    //     })
    // }
    // console.log(add_data)
    if (title.value == '添加员工') {



        addStaff(add_data).then(res => {
            if (res.code == 1) {
                list_api()
                add_off.value = false
                return ElMessage({
                    message: res.msg,
                    type: 'success',
                })
            } else {
                return ElMessage({
                    message: res.msg,
                    type: 'warning',
                })
            }
        })
    } else {

        modifyStaff(add_data).then(res => {
            if (res.code == 1) {
                list_api()
                add_off.value = false
                return ElMessage({
                    message: res.msg,
                    type: 'success',
                })
            } else {
                return ElMessage({
                    message: res.msg,
                    type: 'warning',
                })
            }
        })
    }
}


//#region 删除
const del_btn = () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }

    ElMessageBox.confirm(
        `是否确认删除【${table_list.value[0].staffName}】员工?`,

        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            distinguishCancelAndClose: 'true',
        }
    )
        .then(() => {
            delStaff({
                id: table_list.value[0].id
            }).then(res => {
                if (res.code == 1) {
                    list_api()
                    return ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                } else {
                    return ElMessage({
                        message: res.msg,
                        type: 'warning',
                    })
                }
            })
        })
        .catch((e) => {
            if (e == 'cancel') {
                ElMessage({
                    type: 'warning',
                    message: '取消删除成功',
                })
            }

        })

}
//#endregion

//#region 搜索
const search_btn = () => {

    list_api()
}
//#endregion


</script>

<style scoped lang='scss'>
.div_map {
    position: relative;
    left: 0;
    top: 0;
}

.map_input {
    width: 100%;
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;

}

.map_input2 {
    width: 100%;
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    top: 34px;

}

.div_bg:hover {


    background-color: darkgray;
}
</style>

<style>
.avatar-uploader .avatar {
    width: 100px;
    height: 100px;
    display: block;
}


.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
}

.col-items::-webkit-scrollbar {
    width: 5px !important;
}

.col-items>label {
    margin-left: 0px !important;
    margin-top: 5px;
    width: 100%;
}


.el-table .el-table__cell {
    padding: 0px !important;
}
</style>
